<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /**
    具体效果看50
    stick属性 
      1 不脱离文档流 一旦发生定位 他的位置会被保存不会清空 让其他元素窜上来
      2 如果相对浏览器来说 如果浏览器最外层是有滚动的 设置stick属性的盒子如果距离浏览器顶部达不到设置的top值他是不会变成固定定位 如果达到会变成固定定位 距离浏览器顶部的距离就是设置的top值
      3 当元素达到父级盒子的底部就不会继续固定定位  那么如果父级高度小于盒子高度 盒子就不会固定定位
    */
    </script>
  </body>
</html>
